<template>
	<div class="comment" @click.stop>
		<div class="comment-box" v-if="listData['length']">
			<div class="comment-item uv-border-bottom" v-for="(item, index) in listData" :key="item['_id']" @click="replyComment(item, index)">
				<image :src="item['user']['avatar'] || $surl('/avatar.png')" class="item-avatar" lazy-load mode='aspectFill'></image>
				<div class="comment-right">
					<div class="comment-user">
						<div class="user-left">
							<text class="nickname uv-line-1">{{ item['user']['nickname'] }}</text>
							<text class="time">{{ item['shortDate'] }}</text>
						</div>
						<i class="iconfont icon-shanchu" v-if="userInfo['_id'] === item['user']['user_id']" @click.stop="deleteComment(item)"></i>
					</div>
					<div class="comment-content">
						{{ item['content'] }}
					</div>
					<div class="comment-reply" v-if="item['children']['length']">
						<div class="reply-item" v-for="(iteml, indexl) in item['children']" :key="iteml['_id']"
							@click.stop="childrenReplyComment(item, iteml, index)">
							<image :src="iteml['user']['avatar'] || $surl('/avatar.png')" class="reply-avatar" lazy-load mode='aspectFill'></image>
							<div class="reply-right">
								<div class="reply-user">
									<div class="reply-user-left">
										<text class="reply-nickname uv-line-1">{{ iteml['user']['nickname'] }}</text>
										<text class="reply-time">{{ iteml['shortDate'] }}</text>
									</div>
									<i v-if="userInfo['_id'] === iteml['user']['user_id']" @click.stop="deleteComment(iteml)" class="iconfont icon-shanchu"></i>
								</div>
								<div class="reply-content">
									<text class="reply_type">回复</text>
									<text class="reply_symbol">@</text>
									<text class="reply_account">{{ iteml['reply_user']['nickname'] }}: </text>
									<text class="reply_msg">{{ iteml['content'] }}</text>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-else class="not-comment">别让楼主太孤单，快来评论互动吧！</div>
	</div>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import file from '@/utils/file/index.js'
	import tools from '@/utils/tools/index.js'
	import { onLoad } from '@dcloudio/uni-app';
	import articles from '@/api/articles/index.js'
	import comments from '@/api/comments/index.js'
	import { useUserStore } from '@/store/user.js'

	const test = uni.$uv.test;
	const userStore = useUserStore()
	const userInfo = computed(() => userStore.userInfo);

	const listData = ref([]);

	function checkMe(id) {
		if (userInfo['value']['_id'] === id) {
			return { code: 210, err: '你不能评论自己的评论哦' };
		}

		return { code: 200 }
	}

	function replyComment(item, index) {
		const data = { comment_id: item['_id'], reply_comment_id: item['_id'], reply_user: item['user'] };
		const checkResult = checkMe(item['user']['user_id'])
		if (checkResult['code'] !== 200) {
			checkResult['err'] && tools.toast({ title: checkResult['err'] })
			return;
		}
		uni.$emit('update', { data, index })
	}

	function childrenReplyComment(item, iteml, index) {
		const data = { comment_id: item['_id'], reply_comment_id: iteml['_id'], reply_user: iteml['user'] }
		const checkResult = checkMe(iteml['user']['user_id'])
		if (checkResult['code'] !== 200) {
			checkResult['err'] && tools.toast({ title: checkResult['err'] })
			return;
		}
		uni.$emit('update', { data, index })
	}

	async function initData(id) {
		const response = await comments.getList({ id, page: 1, limit: 9999 });
		if (response['code'] === 200) {
			listData.value = response['data'].map(item => {
				item['shortDate'] = tools.shortDate(item['create_date'])
				item['user']['avatar'] = file.getFileUrl(item['user']['avatar']);
				item['children'] = item['children'].map(iteml => {
					iteml['shortDate'] = tools.shortDate(iteml['create_date'])
					iteml['user']['avatar'] = file.getFileUrl(iteml['user']['avatar']);
					return iteml;
				})
				return item;
			});
		}
	}

	async function updateList() {
		listData.value = listData.value.filter(item => !item['is_delete']);
		listData.value.forEach(item => {
			item['children'] = item['children'].filter(iteml => !iteml['is_delete'])
		})
	}

	function deleteComment(item) {
		const { _id: id, article_id } = item;
		uni.showModal({
			title: '提示',
			content: '确认删除吗？',
			showCancel: true,
			success: async (res) => {
				if (res.confirm) {
					tools.loading();
					const response = await comments.delete({ id, article_id });
					uni.hideLoading();
					if (response['code']) {
						item['is_delete'] = true;
						updateList();
						tools.toast({ title: '删除成功', icon: 'success' })
					}
				}
			}
		})
	}

	uni.$on('comment', ({ data, index }) => {
		if (test.number(index)) {
			listData.value[index]['children'].unshift(data);
		} else {
			data['children'] = [];
			listData.value.unshift(data);
		}
	})

	onLoad(({ id }) => {
		initData(id);
	})
</script>

<style lang="scss" scoped>
	.comment {

		.comment-box {
			.comment-item {
				display: flex;
				flex-direction: row;
				align-items: start;
				padding-bottom: 16rpx;
				padding-top: 32rpx;

				&:last-child {
					border-bottom-width: 0 !important;
				}

				&:first-child {
					padding-top: 0;
				}

				.item-avatar {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}

				.comment-right {
					flex: 1;
					margin-left: 20rpx;

					.comment-user {
						display: flex;
						align-items: center;

						.user-left {
							display: flex;
							align-items: center;
							flex: 1;

							.nickname {
								font-size: 28rpx;
								max-width: 332rpx;
								color: $uv-content-color;
							}

							.time {
								color: $uv-tips-color;
								font-size: 24rpx;
								margin-left: 14rpx;
							}
						}

						.icon-shanchu {
							font-size: 30rpx;
							padding: 0 12rpx;
							color: $uv-tips-color;
						}
					}

					.comment-content {
						line-height: 48rpx;
						margin-top: 10rpx;
						word-break: break-all;
					}

					.comment-reply {
						background: $uv-bg-color;
						padding: $side-width;
						border-radius: 5px;
						margin-top: 22rpx;

						.reply-item {
							display: flex;
							padding-bottom: 22rpx;

							&:last-child {
								padding-bottom: 0;
							}

							.reply-avatar {
								border-radius: 50%;
								height: 44rpx;
								width: 44rpx;
								flex-shrink: 0;
							}

							.reply-right {
								flex: 1;
								margin-left: 20rpx;

								.reply-user {
									display: flex;
									align-items: center;

									.reply-user-left {
										display: flex;
										align-items: center;
										flex: 1;

										.reply-nickname {
											font-size: 28rpx;
											max-width: 150px;
											color: $uv-content-color;
										}

										.reply-time {
											color: $uv-tips-color;
											font-size: 24rpx;
											margin-left: 14rpx;
										}
									}

									.icon-shanchu {
										font-size: 30rpx;
										padding: 0 12rpx;
										color: $uv-tips-color;
									}
								}

								.reply-content {
									line-height: 48rpx;
									font-size: 28rpx;
									margin-top: 6rpx;

									.reply_type {
										color: $uv-content-color;
									}

									.reply_symbol {
										color: $uv-content-color;
										padding-left: 8rpx;
									}

									.reply_account {
										color: $uv-primary-dark;
									}

									.reply_msg {
										color: $uv-main-color;
									}
								}
							}
						}
					}
				}
			}
		}

		.not-comment {
			color: $uv-tips-color;
			padding: 54rpx 0;
			padding-top: 10rpx;
			text-align: center;
		}
	}
</style>